import React, { Component } from "react";
import { IMAGES_ADDRESS, IMAGES_URL } from "../../utils/constants";
import { Modal, Select, Input, message, Upload, Icon } from "antd";

const Option = Select.Option;
const { TextArea } = Input;
const list = [
  "对方未付款",
  "对方未放行",
  "对方无应答",
  "对方有欺诈行为",
  "其他"
];

class AppealModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      appealType: "",
      reason: "",
      fileList: [],
      popup: ""
    };
  }

  handleChange = appealType => {
    this.setState({ appealType });
  };

  desChange = e => {
    let value = e.target.value;
    if (value.length < 500) {
      this.setState({ reason: value });
    }
  };

  handleUploadChange = ({ fileList }) => {
    this.setState({ fileList });
  };

  handlePreview = file => {
    const imgUrl = file.response
      ? `${IMAGES_URL}/${file.response}`
      : file.thumbUrl;
    this.setState({
      popup: (
        <Modal
          visible
          centered
          footer={null}
          onCancel={() => {
            this.setState({ popup: "" });
          }}
        >
          <img alt="图片" style={{ width: "100%" }} src={imgUrl} />
        </Modal>
      )
    });
  };

  // 提交申诉
  okClick = () => {
    const { appealType, reason, fileList } = this.state;
    const { onOk } = this.props;
    if (appealType) {
      let result = { appealType, reason };
      fileList &&
        fileList.forEach((item, index) => {
          if (item.response) {
            if (index === 0) {
              result.imagePath = item.response;
            } else {
              result[`imagePath${index + 1}`] = item.response;
            }
          }
        });
      onOk(result);
    } else {
      message.destroy();
      message.warn("请选择申诉类型");
    }
  };

  render() {
    const { appealType, reason, fileList, popup } = this.state;
    return (
      <Modal
        title="订单申诉"
        visible
        width={520}
        wrapClassName="v-center-modal"
        okText="确认"
        cancelText="取消"
        onCancel={this.props.onCancel}
        onOk={this.okClick}
      >
        <div className="appeal_content">
          <p>
            提起申诉后资产将会冻结，申诉专员将介入本次交易，直至申诉结束。恶意申诉者将会被冻结账户。
          </p>
          <h4 style={{ margin: "8px 0", color: "#dadada" }}>申诉类型</h4>
          <Select
            value={appealType}
            onChange={this.handleChange}
            style={{ width: 470 }}
          >
            {list.map((item, index) => {
              return (
                <Option value={item} key={index}>
                  {item}
                </Option>
              );
            })}
          </Select>
          <h4 style={{ margin: "8px 0", color: "#dadada" }}>申诉理由</h4>
          <TextArea rows={5} value={reason} onChange={this.desChange} />
          <div>
            <h4 style={{ margin: "8px 0", color: "#dadada" }}>付款凭证</h4>
            <Upload
              action="http://images.uescoin.com/upload" //{`${IMAGES_ADDRESS}/upload`}
              listType="picture-card"
              className="img-list"
              fileList={fileList}
              onPreview={this.handlePreview}
              onChange={this.handleUploadChange}
            >
              {fileList.length >= 3 ? null : (
                <div>
                  <Icon type="plus" />
                  <div className="ant-upload-text">上传图片</div>
                </div>
              )}
            </Upload>
          </div>
          {popup}
        </div>
      </Modal>
    );
  }
}
export default AppealModal;
